<script setup>
import { data } from 'autoprefixer';
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';
import mapJson from '@/assets/MapData/china'

// 获取 dom 实例
const target = ref(null)
// echarts 实例变量
let myChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  echarts.registerMap('china', mapJson)  // 注册地图
  myChart = echarts.init(target.value);
  renderChart()
})

const renderChart = () => {
  const option = {
    // 时间线
    timeline: {
      data: props.data.voltageLevel,
      axisType: 'category',
      autoPlay: true,
      playInterval: 3000,
      left: '10%',
      right: '10%',
      bottom: '0%',
      width: '80%',
      label: {
        normal: {
          color: '#ddd'
        },
        emphasis: {
          color: '#fff'
        }
      },
      symbolSize: 10,
      lineStyle: {
        color: '#555'
      },
      checkpointStyle: {
        borderColor: '#888',
        borderWidth: 2
      },
      controlStyle: {
        showNextBtn: true,
        showPreBtn: true,
        normal: {
          color: '#666',
          borderColor: '#666'
        },
        emphasis: {
          color: '#aaa',
          borderColor: '#aaa'
        }
      },
    },
    baseOption: {
      grid:{
        right: '2%',
        top: '15%',
        bottom: '10%',
        width:'20%'
      },
      geo: {
        show: true,
        map: 'china',
        roam: true,
        zoom: 0.8,
        center:[113.83531246,34.0267395887],
        itemStyle:{
          normal:{
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 1,
            areaColor:{
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          },
          emphasis:{
            areaColor: '#389BB7',
            borderWidth: 0
          }
        }
      }
    },
    options:[]
  }

  props.data.voltageLevel.forEach((item,index)=>{
    option.options.push({
      title:[
        {
          text: '2019 - 2023 年度数据统计',
          left: '0%',
          top: '0%',
          textStyle:{
            color: '#ccc',
            fontSize: 30
          }
        },
        {
          id:'statistic',
          text: item + '年数据统计情况',
          right:'0%',
          top:'4%',
          textStyle:{
            color: '#ccc',
            fontSize: 20
          }
        }
      ],
      xAxis:{
        type: 'value',
        scale: true,
        position: 'top',
        splitLine:{
          show:false
        },
        axisLine:{
          show:false
        },
        axisTick:{
          show:false
        },
        axisLabel:{
          margin: 2,
          color: '#aaa'
        }
      },
      yAxis:{
        type: 'category',
        data: props.data.categoryData[item].map(item=>item.name),
        axisTick:{
          show:false
        },
        axisLine:{
          show: true,
          lineStyle:{
            color: '#ddd'
          }
        },
        axisLabel:{
          interval: 0,
          color: '#ddd'
        },
      },
      series:[
        {
          type:'bar',
          z:1.5,
          itemStyle:{
            normal:{
              color: props.data.colors[index]
            }
          },
          data: props.data.categoryData[item].map(item=>item.value)
        },
        {
          type:'effectScatter',
          coordinateSystem:'geo',
          data:props.data.topData[item],
          symbolSize: function(val){
            return val[2] / 10
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          label:{
            normal:{
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle:{
            normal:{
              color: props.data.colors[index],
              shadowBlur: 2,
              shadowColor: props.data.colors[index]
            }
          }
        }
      ]
    })
  })

  myChart.setOption(option);
}

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

watch(() => props.data, () => {
  renderChart()
})



</script>

<template>
  <div>
    <div ref="target" class="w-full h-full"></div>
  </div>

</template>

<style scoped></style>